<template>
  <div class="game-card" @click="toDetail">
    <div class="flex px-[10px] pt-[15px] pb-[10px]">
      <img class="w-[53px] h-[53px]" :src="lotteryLogo(data.LotteryId)" />
      <div class="text-[15px] flex flex-col justify-center ml-[10px]">
        <div>
          <img class="h-[24px]" :src="lotteryText(data.LotteryId)" v-if="lotteryText(data.LotteryId)"/>
          <span v-else>{{ data.Name }}</span>
        </div>
        <div class="mt-[6px]">
          <van-switch
            @click.stop
            class="!text-[16px]"
            :model-value="data.Status"
            :active-value="1"
            :inactive-value="0"
            @update:model-value="onUpdateValue"
          />
        </div>
      </div>
      <div class="flex-1 w-0 flex-col flex justify-center items-end" v-if="data.Status == 1">
        <div class="text-[15px] text-[#65686b]">第{{ data.Issue }}期</div>
        <div class="mt-[6px]">
          <div class="open-time flex items-center">
            <div class="mt-[2px]">
              <template v-if="state.locked && !state.opened">
                <div class="text-[#ff0202] h-[24px] text-[15px] mx-[20px]">封盘中</div>
              </template>
              <template v-if="state.opened">
                <div class="text-[#ff8513] h-[24px] text-[15px] mx-[20px]">开奖中</div>
              </template>
              <open-time
                v-show="!state.locked && !state.opened"
                :total-second="lockSecond"
                @finish="lockTimeFinish"
              />
              <open-time v-show="false" :total-second="openSecond" @finish="openTimeFinish" />
            </div>
          </div>
        </div>
      </div>
      <div class="flex-1 w-0 flex-col flex justify-center items-end" v-else>
        <div class="text-[15px] text-[#65686b]">游戏关闭</div>
      </div>
    </div>
    <div class="flex justify-between items-center mx-[5px] h-[35px] bg-[#DFEFFF] rounded-[7px]">
      <div v-if="data.Status == 1" class="ml-[6px] text-[13px] text-[#111]">
        {{ shortenString(data.LastNum) }}期
      </div>
      <div v-if="data.Status == 1" class="flex items-center">
        <ydh-ball class="!mr-[4px]" v-for="i in lotteryCode" :num="i" type="small"></ydh-ball>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reqSwitchStatus } from "@/api/main";
import { usePremsStore } from "@/store/modules/prems";
import { diffTime } from "@/utils/common";
import { lotteryLogo, lotteryText } from "@/utils/game";
import { toast } from "@/utils/toast";

const props = withDefaults(
  defineProps<{
    data: GameTotalMo;
  }>(),
  {}
);
const premsStore = usePremsStore();
const router = useRouter();
const state = reactive({
  locked: false,
  opened: false
});
const emit = defineEmits(["updateStatus"]);
const lockSecond = computed(() => {
  try {
    let timer = !props.data.CloseTime ? 0 : diffTime(props.data.CloseTime);
    if (timer <= 0) {
      state.locked = true;
      return 0;
    } else {
      state.locked = false;
      return timer;
    }
  } catch (error) {
    return 0;
  }
});
const openSecond = computed(() => {
  try {
    let timer = !props.data.NextTime ? 0 : diffTime(props.data.NextTime);
    if (timer <= 0) {
      state.opened = true;
      return 0;
    } else {
      state.opened = false;
      return timer;
    }
  } catch (error) {
    return 0;
  }
});
const lotteryCode = computed(() => {
  return props.data.LuckCode.split(",").map(item => Number(item));
});

const shortenString = (str: string, maxLength = 8) => {
  if (str.length > maxLength) {
    return str.slice(0, 3) + "..." + str.slice(-5);
  }
  return str;
};

const lockTimeFinish = () => {
  state.locked = true;
};

const openTimeFinish = () => {
  state.opened = true;
};
const onUpdateValue = async (val: number) => {
  if (!premsStore.isEditGameSetting || !premsStore.isMenuSetting) {
    toast.info("暂无权限");
    return;
  }
  const loading = toast.loading();
  try {
    await reqSwitchStatus({
      LotteryId: props.data.LotteryId,
      Status: val
    });
    emit("updateStatus", val);
    loading.close();
    toast.info("设置成功");
  } catch (error) {
    loading.close();
    console.log(error);
  }
};

const toDetail = () => {
  if (props.data.Status != 1) {
    toast.info("游戏未开启");
    return;
  }
  router.push(`/admin/main/room/${props.data.LotteryId}`);
};
</script>
<style scoped>
.game-card {
  @apply bg-[#F1F8FF] pb-[5px] mb-[15px] mx-[15px] rounded-[10px];
}
</style>
